<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仓库管理</title>
<link rel="stylesheet" th:href="@{/css/goods_trade/goods_trade.css}">
</head>
<body>
	<div id="pageDiv">
	
		<div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
			  <el-breadcrumb-item>库存管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		
		<!-- content start -->
			<el-form :inline="true" :model="wareHouseVO" class="demo-form-inline">
			  <el-form-item label="仓库地址">
			    <el-select v-model="wareHouseVO.houseId" placeholder="仓库地址" @change="selectHouseForQuery">
			      <el-option v-for="ho in house" :label="ho.houseName" :value="ho.id" :key="ho.id"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="库位地址">
			    <el-select v-model="wareHouseVO.positionId" placeholder="库位地址">
			      <el-option v-for="po in position" :label="po.positionName" :value="po.id" :key="po.id"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="货位位置">
			    <el-select v-model="wareHouseVO.locationId" placeholder="货位位置">
			      <el-option v-for="lo in location" :label="lo.locationName" :value="lo.id" :key="lo.id"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="商品名称">
			       <el-input v-model="wareHouseVO.goodsName" placeholder="商品名称"></el-input>
			  </el-form-item>
			  <el-form-item label="商品编号">
			      <el-input v-model="wareHouseVO.sku" placeholder="商品编号"></el-input>
			  </el-form-item>
			  <br>
			  <div class="submitBtn">
			    <el-button type="primary" @click="onQueryForBtn" :loading="queryBtn">查询</el-button>
			  </div>
			</el-form>
		<!-- content end -->
			<el-tag style="width:100%;">详情表格</el-tag>
		<!-- table start -->
			<template>
			  <el-table
			    :data="tableData"
			    style="width: 100%">
			    <el-table-column type="expand">
			      <template slot-scope="props">
			        <el-form label-position="left" inline class="demo-table-expand">
			          <el-form-item label="商品条形码">
			            <span>{{ props.row.goodsBarCode }}</span>
			          </el-form-item>
			          <el-form-item label="所属仓库">
			            <span>{{ props.row.houseName }}</span>
			          </el-form-item>
			          <el-form-item label="所属仓库储位" >
			            <span>{{ props.row.positionName }}</span>
			          </el-form-item>
			          <el-form-item label="所属仓库货位" >
			            <span>{{ props.row.locationName }}</span>
			          </el-form-item>
			          <el-form-item label="商品分类">
			            <span>{{ props.row.goodsType }}</span>
			          </el-form-item>
			          <el-form-item label="单位">
			            <span>{{ props.row.goodsUnit }}</span>
			          </el-form-item>
			          <el-form-item label="商品编码">
			            <span>{{ props.row.sku }}</span>
			          </el-form-item>
			          <el-form-item label="商品描述">
			            <span>{{ props.row.goodsDesc }}</span>
			          </el-form-item>
			          <el-form-item label="商品单价">
			            <span>{{ props.row.goodsPrice }}</span>
			          </el-form-item>
			          
			        </el-form>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="商品 ID"
			      prop="id">
			    </el-table-column>
			    <el-table-column
			      label="商品名称"
			      prop="goodsName">
			    </el-table-column>
			    <el-table-column
			      label="描述"
			      prop="goodsDesc">
			    </el-table-column>
			    <el-table-column
			      label="数量"
			      prop="goodsNum">
			    </el-table-column>
			    
			    <el-table-column
				      fixed="right"
				      label="操作"
				      width="100">
				      <template slot-scope="scope">
				      	<!-- 弹窗 --> 
						<el-popover  ref="popover" placement="left" width="600" trigger="click" class="demo-input-suffix">
						 <el-form :inline="false" :model="wareHouseVO2" label-width="80px"  ref="wareHouseVO2" label-position="right" size="small" :rules="rules">
							<el-form-item label="商品编码" prop="goodsBarCode">
								<el-col :span="15">
		  							<el-input placeholder="请输入商品编码" v-model="scope.row.goodsBarCode"></el-input>
		  						</el-col>
							</el-form-item>
							<el-form-item label="库位" prop="locationName" >
								<el-col :span="15">
		  							<el-input placeholder="请输入库位" v-model="scope.row.locationName"></el-input>
		  						</el-col>
							</el-form-item>
							<el-form-item label="商品类型" prop="goodsType">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品类型" v-model="scope.row.goodsType"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品单位" prop="goodsUnit">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品单位" v-model="scope.row.goodsUnit"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品价格" prop="goodsPrice">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品价格" v-model="scope.row.goodsPrice"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品描述" prop="goodsDesc">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品描述" v-model="scope.row.goodsDesc"></el-input>
			  					</el-col>
							</el-form-item>
							<el-form-item label="商品名称" prop="goodsName">
								<el-col :span="15">
			  						<el-input placeholder="请输入商品名称" v-model="scope.row.goodsName"></el-input>
			  					</el-col>
							</el-form-item>
		  				</el-form>
		  				<span class="dialog-footer">
							    <el-button size="mini" type="primary" @click="updateForm('wareHouseVO2',scope.row)">确定</el-button>
							    <el-button size="mini" type="primary" @click="closePopper()">取消</el-button>
							</span>
						</el-popover>
				      	
				        <el-button v-popover:popover @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
				        <el-button v-popover:popover @click="editClick(scope.row)" type="text" size="small" 
				        	v-if="scope.row.locationName === '报废'">删除</el-button>
				      </template>
				    </el-table-column>
			    
			  </el-table>
			</template>		
			
			<div class="pageContent">		
				<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      :page-sizes="[5, 10]"
			      :page-size="pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalSize">
			    </el-pagination>
			</div>
		<!-- table end -->
	</div>
</body>
<script type="text/javascript" th:src="@{js/warehouse/goodTrade.js}"></script>
</html>